<template>
  <view class="index-list">
    <view class="checkbox-wrapper">
      <view
        @tap="check"
        class="checkbox-input"
        v-bind:class="[
          item.checked ? 'checkbox-input-checked' : '',
          disabled ? 'checkbox-input-disabled' : '',
        ]"
      ></view>
    </view>
    <view class="slot-content" @tap="opendetail">
      <image
        class="slot-image-profile"
        :src="item.userImage"
        mode="widthFix"
      ></image>
      <text class="slot-profile-name">{{ item.userName }}</text>
    </view>
    <view v-if="item.type === 'department'" class="hn-list-arrowright">
      <image
        class="arrow-right"
        src="../../static/icon-arrow.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    disabled: Boolean,
  },
  methods: {
    // 进入详情页
    opendetail() {
      // 通知父组件
      this.$emit("opendetail", [this.item, this.index]);
    },
    check() {
      if (this.disabled) return;

      this.item.checked = !this.item.checked;
      // 通知父组件
      this.$emit("checkboxChange", [this.item, this.index]);
    },
  },
};
</script>

<style scoped>
.index-list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  padding: 20upx;
  border-bottom: 1upx solid #eeeeee;
}
.checkbox-wrapper {
  flex: 0 0 68upx;
  display: flex;
  align-items: center;
}
/*checkbox 选项框大小  */
.checkbox-input {
  border-radius: 50%;
  width: 48upx;
  height: 48upx;
  background: #ffffff;
  border: 2px solid #cbcbcb;
}
/*checkbox选中后样式  */
.checkbox-input-checked {
  background: #3d7eff;
  border-color: #3d7eff;
}
/*checkbox选中后图标样式  */
.checkbox-input-checked::before {
  display: block;
  position: absolute;
  content: '✓';
  text-align: center;
  font-size: 38upx;
  line-height: 38upx;
  color: #fff;
  border: 1px solid #386ff0;
  border-radius: 100%;
  width: 38upx;
  height: 38upx;
}
.checkbox-input-disabled {
  background: #dddddd;
  border-color: #dddddd;
}
.checkbox-input-disabled::before {
  display: block;
  position: absolute;
  content: '✓';
  text-align: center;
  font-size: 38upx;
  line-height: 36upx;
  color: #ccc;
  border: 1px solid #dddddd;
  border-radius: 100%;
  width: 38upx;
  height: 38upx;
}
.slot-content {
  width: calc(100% - 68upx);
  display: flex;
  align-items: center;
  margin-left: 20upx;
}
.slot-profile-name {
  margin-left: 32upx;
  font-size: 32upx;
  font-weight: 500;
  color: #333333;
}
.slot-image-profile {
  width: 88upx;
  height: 88upx;
  border-radius: 10upx;
}
.slot-image-arrow {
  position: absolute;
  right: 29upx;
  z-index: 999;
  width: 32upx;
  height: 52upx;
}
.hn-list-arrowright {
  display: flex;
  align-items: center;
}
.arrow-right {
  width: 24upx;
  height: 39upx;
}
</style>
